<template>
  <my-dv-page class="page-warp">
    <my-dv-starry :opacity="0.4"></my-dv-starry>
    <my-dv-header1>数据可视化大屏页面</my-dv-header1>
    <my-dv-box class="left-side-warp" layout :gap="10"
      top="120px" left="10px" width="calc(25% - 30px)"
      height="calc(100% - 130px)" direction="row" 
    >
      <my-dv-box width="100%" :weight="1" style="border: 1px solid white"> 
        <left-top></left-top>
      </my-dv-box>
      <my-dv-box width="100%" :weight="1" style="border: 1px solid pink"> 
        <left-bottom></left-bottom>
      </my-dv-box>
      
    </my-dv-box> 
    <my-dv-box class="center-warp" layout :gap="10" 
      top="100px" right="25%" width="50%"
      height="calc(100% - 100px)" direction="row" 
    >
      
      <!-- <my-dv-border2 width="100%" :weight="1.5"> 
        
      </my-dv-border2>
      <my-dv-border2 width="100%" :weight="0.5"> 
        
      </my-dv-border2> -->
    </my-dv-box>

    <my-dv-box  class="right-side-warp" layout :gap="10"
      top="120px" right="10px" width="calc(25% - 30px)"
      height="calc(100% - 130px)" direction="row" 
    >
       <my-dv-box width="100%" :weight="1" style="border: 1px solid pink"> 

      </my-dv-box>
      <my-dv-box width="100%" :weight="1" style="border: 1px solid pink"> 

      </my-dv-box>
    </my-dv-box>
  </my-dv-page>
</template>
<style lang="scss" scoped>
.page-warp{
  perspective: 1200px;
  .left-side-warp{
    transform-origin: left top;
    transform: rotateY(20deg);
    // border: 1px solid white;
  }
  .right-side-warp{
    transform-origin: right top;
    transform: rotateY(-20deg);
    //  border: 1px solid white;
  }
  .center-warp{
    transform: translateZ(-70px);
     border: 1px solid white;
  }
}
</style>
<script>
import LeftTop from '@/components/big-screen/screen1/left-top'
import LeftBottom from '@/components/big-screen/screen1/left-bottom'
export default {
  components: {
    LeftTop,
    LeftBottom
  },
  props: {
  },
  data() {
    return {
    }
  },
  computed: {
  },
  methods: {
  },
  created() {
  },
  mounted() {
  }
}
</script>
